{extend name="public/container"}
{block name='head_top'}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.8.3/Sortable.min.js"></script>
{/block}
{block name="content"}
<div id="myApp">
    <div class="add-page-title flex flex-between padding-20">
        <div class="title">新增/编辑</div>
        <el-link :underline="false" type="primary" href="{:Url('index')}">返回</el-link>
    </div>
    <div class="padding-10">
        <div class="content-wrap">
            <div class="basic-info-form-wrap">
                <el-form :model="formData" :rules="rules" ref="formData" size="small" label-width="100px" >
                    <div class="detail-seg">
                        <div class="detail-header flex flex-between">
                            <div class="info">基础信息</div>
                            <div class="opt"></div>
                        </div>
                        <div class="detail-content">
                            <el-form-item label="线路名称" prop="route_name">
                                <el-input v-model="formData.route_name" maxlength="120" show-word-limit placeholder="线路名称" autocomplete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="出发地点" prop="start_address">
                                <el-input v-model="formData.start_address" maxlength="140" show-word-limit placeholder="出发地点" autocomplete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="结束地点" prop="end_address">
                                <el-input v-model="formData.end_address" maxlength="140" show-word-limit placeholder="结束地点" autocomplete="off"></el-input>
                            </el-form-item>

                            <el-form-item label="线路类型" prop="route_type">
                                <el-select :clearable=true placeholder="线路类型" v-model="formData.route_type">
                                    <el-option v-for="item in routeTypes" :label="item.val" :key="item.key" :value="item.key"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="定金设置" prop="support_deposit">
                                <div class="flex">
                                    <div style="margin-right:20px">
                                        <el-checkbox v-model="formData.support_deposit" :true-label="1" :false-label="0">支持定金</el-checkbox>
                                    </div>

                                    <div class="flex" v-if="formData.support_deposit==1">
                                        <div style="margin-right: 15px;">
                                            <el-input v-model="formData.desposit.min_people"  type="number" placeholder="支付定金最低人数" autocomplete="off">
                                                <template slot="prepend">最低满</template>
                                                <template slot="append">人</template>
                                            </el-input>
                                        </div>

                                        <div>
                                            <el-input v-model="formData.desposit.deposit_amt" type="number" placeholder="每人定金金额" autocomplete="off">
                                                <template slot="prepend">每人定金金额</template>
                                                <template slot="append">元</template>
                                            </el-input>
                                        </div>
                                    </div>
                                </div>

                            </el-form-item>

                            <el-form-item label="最小起售" prop="min_sold_num">
                                <div class="mixture-wrap flex">
                                    <div class="mixture-item">
                                        <el-input-number v-model="formData.min_sold_num" controls-position="right" :min="1" :max="9999"></el-input-number>
                                    </div>

                                    <div class="mixture-item">
                                        <el-checkbox v-model="formData.is_return_gold" :true-label="1" :false-label="0">支持返金币</el-checkbox>
                                    </div>

                                    <div class="mixture-item">
                                        <el-checkbox v-model="formData.is_gift_insurance" :true-label="1" :false-label="0">赠送出行险</el-checkbox>
                                    </div>

                                    <div class="mixture-item">
                                        <el-checkbox v-model="formData.is_refund_whatever" :true-label="1" :false-label="0">支持随心退</el-checkbox>
                                    </div>
                                </div>
                            </el-form-item>

                            <el-form-item label="标签设置" prop="label">
                                <el-tag
                                  :key="tag"
                                  v-for="tag in formData.label"
                                  closable
                                  :disable-transitions="false"
                                  @close="handleClose(tag)">
                                  {{tag}}
                                </el-tag>
                                <el-input
                                  class="input-new-tag"
                                  v-if="newLableVisible"
                                  v-model="newLableValue"
                                  ref="saveTagInput"
                                  size="small"
                                  @keyup.enter.native="handleInputConfirm"
                                  @blur="handleInputConfirm"
                                >
                                </el-input>
                                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增</el-button>
                            </el-form-item>
							
							<el-form-item label="分享信息" prop="share_info">
								<el-input type="textarea" v-model="formData.share_info" maxlength="120" show-word-limit placeholder="微信分享信息" rows="6"></el-input>
							</el-form-item>
							
							<el-form-item label="封面主图" prop="cover">
							    <el-upload
							            class="avatar-uploader"
							            action="/admin/upload/image"
							            accept="image/jpeg,image/png,image/jpg"
							            :show-file-list="false"
							            :on-success="uploadCoverSuccess"
							            >
							        <img v-if="formData.cover" :src="formData.cover" class="avatar">
							        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
							        <div slot="tip" class="el-upload__tip">尺寸建议为300×300或等比例，格式jpg/jpeg/png且不超过5MB</div>
							    </el-upload>
							</el-form-item>
                            <el-form-item label="介绍视频" prop="main_video">
                                <el-input v-model="formData.main_video" placeholder="视频地址">
                                    <template slot="append">
                                        <el-upload
                                            action="/admin/upload/video"
                                            :show-file-list="false"
                                            accept="video/mp4"
                                            :on-success="uploadVideoSuccess"
                                            :before-upload="beforeUploadVideo">
                                            <i class="el-icon-plus">上传</i>
                                        </el-upload>
                                    </template>
                                </el-input>
                            </el-form-item>

                            <el-form-item label="轮播图册" prop="albums">
                                <el-upload
                                    class="upload-demo"
                                    action="/admin/upload/image"
                                    accept="image/jpeg,image/png,image/jpg"
                                    :on-success="uploadAlbumSuccess"
                                    :show-file-list="false"
                                    :multiple="true">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M。拖动进行排序。</div>
                                </el-upload>
                                <div class="album-preview flex" v-if="formData.albums" id="albums-list">
                                    <div class="album-item flex" v-for="(item,index) in formData.albums">
                                        <img :src="item" />
                                        <span class="del-btn">
                                            <el-button size="mini" @click="deleteAlbumsImage(index)" type="danger" icon="el-icon-delete">删除</el-button>
                                        </span>
                                    </div>
                                </div>
                            </el-form-item>
                        </div>
                    </div>

                    <div class="detail-seg" v-if="formData.id > 0">
                        <div class="detail-header flex flex-between">
                            <div class="info">规格/库存/价格</div>
                            <div class="opt">
                                <el-button icon="el-icon-plus" size="mini" @click="addSkuPrice()"></el-button>
                            </div>
                        </div>
                        <div class="detail-content">
                            <el-form-item label="规格库存" prop="skus">
                                <div v-if="!skus.length">请点击右上角+号添加</div>
                                <div class="sku-list">
                                    <div class="sku-item flex" v-for="(item,key) in skus">
                                        <el-input style="width: 400px;" v-model="item.sku_name" maxlength="20" show-word-limit placeholder="线路名称" autocomplete="off">
                                            <template slot="append">
                                                <el-button @click="saveSku(key)">保存</el-button>
                                            </template>
                                        </el-input>

                                        <div style="margin-left: 15px;" v-if="item.id>0">
                                            <el-button size="mini" type="warning" icon="el-icon-date" @click="setSkuPrice(item.id)"></el-button>
                                            <el-button size="mini" type="danger" icon="el-icon-delete" @click="delSkuPrice(item.id)"></el-button>
                                        </div>
                                    </div>
                                </div>
                            </el-form-item>
                        </div>
                    </div>

                    <div class="detail-seg">
                        <div class="detail-header flex flex-between">
                            <div class="info">线路详情</div>
                            <div class="opt" @click="addDetailsMod" style="cursor: pointer;">+添加模块</div>
                        </div>
                        <div class="detail-content mobile-layout-wrap flex">
                            <div class="mobile-layout" v-for="(item,key) in formData.details">
                                <div class="title flex flex-between" > 
                                    <div class="flex">
                                        <div>
                                            <el-input size="mini" v-model="item.mod_title" label="模块名称"></el-input>
                                        </div>
                                        <div class="flex" style="margin-left:16px; align-items: center;">
                                            <div style="margin-right:10px">排序：</div>
                                            <div style="width:120px">
                                                <el-input-number v-model="item.sort" size="mini" :controls="false" :min="1" :max="99999" label="排序"></el-input-number>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex" style="margin-left:14px;">
                                        <el-link :underline="false" type="danger" style="margin-right: 10px;" @click="removeDetailsMod(key,item.id)">删除</el-link>
                                        <el-link :underline="false" type="primary" @click="editDetailsMod(item.id)">编辑</el-link>
                                    </div>
                                </div>
                                <div class="content-scoller" v-if="item.mod_details">
                                    <div class="content-scoller-details" v-html="item.mod_details"></div>
                                </div>
                                <div class="flex padding-20" style="justify-content: center; align-items: center; color: #999" v-else>点击编辑添加修改</div>
                            </div>
                        </div>
                    </div>

                    <div style="position: fixed; left: 20px; bottom: 100px; width: 50px;display: flex;flex-wrap: wrap;justify-content: center;padding: 16px 0;border-top-right-radius: 6px; border-bottom-right-radius: 6px; background: rgba(0, 0, 0, 0.8);">
                        <el-link style="font-size: 16px;" :underline="false" type="success" @click="doSave('formData')" style="margin-bottom: 16px;">保存</el-link>
                        <el-link style="font-size: 16px;" :underline="false" type="primary" href="{:Url('index')}">返回</el-link>
                    </div>
                </el-form>
            </div>
        </div>
    </div>

    <!-- 价格设置   -->
    <el-dialog title="SKU设置" fullscreen :visible.sync="skuPriceCfgFlag">
        <el-collapse>
            <el-collapse-item title="添加月份排班" style="color: #bb0000; font-size:16px; font-weight: bold;">
                <div class="flex sku-price-config" style="flex-wrap:wrap;">
                    <div class="block">
                        <div style="margin-right:6px">可售月份</div>
                        <el-date-picker
                            type="months"
                            v-model="generateSkuConfig.allowSoldMonthes"
                            size="mini"
                            value-format="yyyy-MM"
                            placeholder="选择一个或多个月">
                        </el-date-picker>
                    </div>

                    <div class="block">
                        <div style="margin-right:6px">固定周几</div>
                        <el-select size="mini" v-model="generateSkuConfig.fix_weeks" multiple placeholder="请选择">
                            <el-option
                                v-for="item in weeks"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>

                    <div class="block">
                        <span style="margin-right:6px">售价</span>
                        <div class="sku-price-prime" v-for="option in primePriceOptions">
                            <el-input type="number" v-model="option.level_price" size="mini" >
                                <template slot="prepend">{{option.grade_type_display}}</template>
                                <template slot="append">元</template>
                            </el-input>
                        </div>
                    </div>

                    <div class="block">
                        <span style="margin-right:6px">周末加价</span>
                        <el-input type="number" v-model="generateSkuConfig.holiday_plus" size="mini">
                            <template slot="append">元</template>
                        </el-input>
                    </div>

                    <div class="block">
                        <span style="margin-right:6px">库存</span>
                        <el-input type="number" v-model="generateSkuConfig.store" size="mini">
                            <template slot="append">份</template>
                        </el-input>
                    </div>

                    <!-- <div class="block">
                        <span style="margin-right:6px">双床房型</span>
                        <el-input type="number" v-model="generateSkuConfig.double_room" size="mini">
                            <template slot="append">间</template>
                        </el-input>
                    </div>

                    <div class="block">
                        <span style="margin-right:6px">大床</span>
                        <el-input type="number" v-model="generateSkuConfig.big_room" size="mini">
                            <template slot="append">间</template>
                        </el-input>
                    </div> -->

                    <div class="flex" style="width: 100%;justify-content: flex-end;">
                        <el-button size="small" type="danger" icon="el-icon-setting" :loading="doGenerateSkuDetailsLoading" @click="doGenerateSkuDetails()">生成明细</el-button>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>

        <div class="month-list">
            <div style="color: #bb0000; font-size:16px; font-weight: bold;">已排班月份</div>
            <el-collapse v-model="activeMonthIndex">
                <el-collapse-item style="position: relative;" :title="item.month" :name="key" :key="key" v-for="(item,key) in preSkuconfigDetails">
                    <div class="copy-month" @click="copyMonth(key)">复制</div>
                    <div class="delete-month" @click="deleteMonth(key)">删除</div>
                    <div class="month-item" v-for="(sitem,skey) in item.days">
                        <div class="month-item-head flex" v-if="skey==0">
                            <div style="width: 90px">日期</div>
                            <div class="iiii-item">售价</div>
                            <div class="iiii-item">库存</div>
                            <!-- <div class="iiii-item">双床房</div>
                            <div class="iiii-item">大床房</div> -->
                        </div>
                        <div class="month-item-content flex">
                            <div style="width: 90px">
                                <div>{{ sitem.date }}</div>
                                <div>
                                    <el-link :underline="false" type="danger" v-if="sitem.week==0||sitem.week==6">({{ sitem.week_display }})</el-link>
                                    <el-link :underline="false" type="info" v-else>({{ sitem.week_display }})</el-link>
                                </div>
                            </div>
                            <div class="iiii-item">
                                <div class="sku-price-prime" v-for="option in sitem.prices">
                                    <el-input type="number" v-model="option.level_price" size="mini" style="min-width: 200px;" >
                                        <template slot="prepend">{{option.grade_type_display}}</template>
                                    </el-input>
                                </div>
                            </div>
                            <div class="iiii-item">
                                <el-input size="mini" v-model="sitem.store" style="min-width: 100px;"></el-input>
                            </div>
                            <!-- <div class="iiii-item">
                                <el-input size="mini" v-model="sitem.double_room" style="min-width: 100px;"></el-input>
                            </div>
                            <div class="iiii-item">
                                <el-input size="mini" v-model="sitem.big_room" style="min-width: 100px;"></el-input>
                            </div> -->
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="small" @click="saveSkuPrice">保 存</el-button>
            <el-button type="info" size="small" @click="skuPriceCfgFlag = false">关 闭</el-button>
        </span>
    </el-dialog>

    <!-- 详情模块添加   -->
    <el-dialog title="添加详情模块" :visible.sync="addDetailsModFlag">
        <el-form size="small" label-width="100px" >
            <el-form-item label="模块名称" prop="mod_title">
                <el-input v-model="detailsModTitle" maxlength="10" show-word-limit placeholder="模块名称，10个字以内" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="模块排序" prop="sort">
                <el-input v-model="detailsModSort" maxlength="10" show-word-limit placeholder="模块排序" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="small" @click="confirmDetailsMod">确 定</el-button>
            <el-button type="info" size="small" @click="addDetailsModFlag = false;detailsModTitle=''">关 闭</el-button>
        </span>
    </el-dialog>

    <!-- 月份复制   -->
    <el-dialog title="月份复制" :visible.sync="showTargetMonths">
        <el-form size="small" label-width="100px" >
            <el-form-item label="目标月份" prop="mod_title">
                <el-date-picker
                    type="months"
                    v-model="copyMonthData.targetMonths"
                    size="mini"
                    value-format="yyyy-MM"
                    placeholder="选择一个或多个月">
                </el-date-picker>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" size="small" @click="confirmCopyMonth">确 定</el-button>
            <el-button type="info" size="small" @click="showTargetMonths = false">关 闭</el-button>
        </span>
    </el-dialog>
</div>

<style type="text/css">
    .el-tag:not(:last-child) {
        margin-right: 10px;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .detail-seg:not(:last-child) {
        margin-bottom: 25px;
    }
    .album-preview .album-item .del-btn {
        width: 100%;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        padding: 6px 0;
    }
    .detail-seg .detail-header {
        background-color: rgb(8 133 235 / 52%);
        color: #fff;
        padding: 10px 15px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .detail-seg .detail-content {
        border:1px solid #e2e2e2;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding: 15px;
    }
    .mixture-wrap .mixture-item:not(:last-child) {
        margin-right: 14px;
    }
    .sku-list .sku-item:not(:last-child) {
        margin-bottom: 16px;
    }
    .sku-price-config .block {
        width: 46%;
        padding-left: 4%;
        margin-bottom: 6px;
    }
    .sku-price-prime:not(:last-child) {
        margin-bottom: 6px;
    }
    .month-list{margin-top: 20px}
    .month-list .month-item {
        padding: 6px 0;
        border-bottom: 1px solid #e2e2e2;
    }
    .month-list .month-item .month-item-head div:first {
        width: 30%;
    }
    .month-list .month-item .month-item-head div,.month-list .month-item .month-item-content div.iiii-item {
        width: calc((100% - 120px)/4);
        font-size: 13px;
        text-align: left;
    }
    .month-list .month-item .month-item-head div:not(:last-child),.month-list .month-item .month-item-content div.iiii-item:not(:last-child) {margin-right: 10px}

    .mobile-layout-wrap {
        flex-wrap: wrap;
    }
    .mobile-layout {
        width: 44%;
        border: 1px solid #e2e2e2;
        padding: 14px 20px;
        border-radius: 6px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .mobile-layout:nth-child(odd) {margin-right: 20px}
    .content-scoller {
        width: 375px;
        height: 667px;
        background-image: url(/public/system/frame/images/iPhone13.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 30px;
        position: relative;
        margin-top: 14px;
    }
    .content-scoller-details {
        position: absolute;
        top: 48px;
        width: 330px;
        height: 575px;
        overflow-y: scroll;
        left:20px;
        border-top: 1px solid #e2e2e2;
    }
    .blue-background-class {
        background-color: #C8EBFB!important;
    }
    .delete-month {
        background: rgb(237 11 11 / 82%);
        position: absolute;
        top: 10px;
        right: 40px;
        color: #fff;
        padding: 4px 10px;
        font-size: 12px;
        border-radius: 6px;
        cursor: pointer;
    }
    .copy-month {
        background: rgb(37 55 100 / 82%);
        position: absolute;
        top: 10px;
        right: 100px;
        color: #fff;
        padding: 4px 10px;
        font-size: 12px;
        border-radius: 6px;
        cursor: pointer;
    }
</style>

{/block}

{block name="script"}
<script>
    var data    = <?=isset($data) ? $data : "{}"?>;
    var desposit = {
        min_people: 0,
        deposit_amt: 0
    }

    var my = new Vue({
        el: "#myApp",
        data: {
            formData: {
                id: data.id || 0,
                route_name: data.route_name || '',
                route_type: data.route_type || 0,
                min_sold_num: data.min_sold_num || 1,
                is_return_gold: data.is_return_gold || 0,
                is_gift_insurance: data.is_gift_insurance || 0,
                is_refund_whatever: data.is_refund_whatever || 0,
                label: data.label || [],
                start_address: data.start_address || '',
                end_address: data.end_address || '',
				cover: data.cover || '',
				share_info: data.share_info || '',
                main_video: data.main_video || '',
                albums: data.albums || [],
                skus: data.skus || [],
                status:data.status || 0,
                details: data.details || [],
                support_deposit: data.support_deposit || 0,
                desposit: data.desposit || desposit
            },
            skus:[],
            newLableVisible: false,
            newLableValue: '',
            routeTypes:[],
            rules: {
                route_type: [
                    { required: true, message: '此项不能为空', trigger: 'blur' },
                ],
                route_name: [
                    { required: true, message: '此项不能为空', trigger: 'blur' },
                ]
            },
            loading: null,
            skuPriceCfgFlag: false,
            weeks: [
                {
                    label: '周一',
                    value: 1,
                },
                {
                    label: '周二',
                    value: 2,
                },
                {
                    label: '周三',
                    value: 3,
                },
                {
                    label: '周四',
                    value: 4,
                },
                {
                    label: '周五',
                    value: 5,
                },
                {
                    label: '周六',
                    value: 6,
                },
                {
                    label: '周日',
                    value: 0,
                }
            ],
            generateSkuConfig: {
                allowSoldMonthes: '',
                fix_weeks: [],
                prices: [],
                holiday_plus: 0,
                store: 0,
                double_room: 0,
                big_room: 0
            },
            doGenerateSkuDetailsLoading: false,
            preSkuconfigDetails: [],
            activeMonthIndex: ["0"],
            activeSkuId: 0,
            primePriceOptions: [],
            desposit: {
                min_people: 0,
                deposit_amt: 0
            },
            addDetailsModFlag: false,
            detailsModTitle: '',
            detailsModSort: 0,
            copyMonthData: {
                targetMonths: [],
                sourceMonth: {}
            },
            showTargetMonths: false
        },
        methods: {
            addDetailsMod() {
                this.addDetailsModFlag = true
            }
            ,confirmDetailsMod() {
                axios.post(Url({a:'saveDetailsMod'}) , {route_id: this.formData.id, mod_titlt: this.detailsModTitle, sort: this.detailsModSort}).then(res => {
                    this.formData.details.push({
                        id: res.data.data.id || 0,
                        route_id: res.data.data.route_id || 0,
                        sort: res.data.data.sort || 0,
                        mod_title: res.data.data.mod_title || '',
                        mod_details: res.data.data.mod_details || '',
                        article_id: res.data.data.article_id || 0
                    })

                    this.addDetailsModFlag = false
                }).catch(error => {
                    return this.$message.error('添加错误')
                })
            }
            ,removeDetailsMod(key , detailId) {
                if ( detailId > 0 ) {
                    this.$confirm('此操作不可撤销。确定删除吗？').then(_ => {
                        axios.get(Url({a:'deleteDetails' , q:{id:detailId}})).then(res => {
                            this.formData.details.splice(key,1)
                        }).catch(error => {
                            return this.$message.error(error)
                        })
                    }).catch(_ => {})

                    return
                }

                this.formData.details.splice(key,1)
            }
            ,editDetailsMod(detailId) {
                axios.get(Url({a:'getDetailsEditUrl' , q:{id:detailId}})).then(res => {
                    if ( res.data.code == 200 ) {
                        var _this = this
                        setTimeout(function() {
                            _this.$confirm('同步成功后如页面有未保存数据请先取消再手动刷新。确定刷新本页面吗？').then(_ => {
                                window.location.reload()
                            }).catch(_ => {})
                        },3000)
                        return window.open(res.data.data.url)
                    }
                    
                    return this.$message.error(res.data.msg || '获取链接失败')
                }).catch(error => {
                    return this.$message.error(error)
                })
            }
            ,doLoadRouteType () {
                axios.get(Url({a:'get_attr' , q:{name:'route_type'}})).then(res => {
                    this.routeTypes = res.data.data
                })
            }
            ,loadPrimePrice () {
                axios.get(Url({a:'preparePrimePriceOptions'})).then(res => {
                    this.primePriceOptions = res.data.data
                })
            }
            ,handleClose(tag) {
                this.formData.label.splice(this.formData.label.indexOf(tag), 1);
            }
            ,showInput() {
                this.newLableVisible = true;
                this.$nextTick(_ => {
                  this.$refs.saveTagInput.$refs.input.focus();
                });
            }
            ,handleInputConfirm() {
                let newLableValue = this.newLableValue;
                if (newLableValue) {
                  this.formData.label.push(newLableValue);
                }
                this.newLableVisible = false;
                this.newLableValue = '';
            }
            ,doSave(formName) {
                this.formData.status = 1
                this.$refs[formName].validate((valid) => {
                    if ( valid ) {
                        let _loading = this.$loading({
                            lock: true,
                            text: '保存中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });

                        axios.post(Url({a:'save'}) , this.formData).then(res => {
                            if ( res.data.code == 200 ) {
                                var _this = this
                                setTimeout(function(){
                                    if (_this.formData.id>0) {
                                        window.location.reload()
                                    } else {
                                        window.location.href = Url({a:'index'})
                                    }
                                },2000)
                                return this.$message.success('保存成功')
                            }
                            return this.$message.error('保存失败')
                        }).catch(_ => {
                            this.$message({
                                message: '操作失败',
                                type: 'error'
                            })
                        }).finally(_ => {
                            _loading.close()
                        })
                    }
                })
            }
            // 视频上传前检查
            ,beforeUploadVideo(file) {
                var FileExt = file.name.replace(/.+\./, "");
                if (["mp4", "m4v","avi"].indexOf(FileExt.toLowerCase()) === -1) {
                    this.$message({
                        type: "warning",
                        message: "请上传后缀名为mp4/m4v/avi的视频！"
                    });
                    return false;
                }
                //file.size 以字节为单位
                this.isLt2k = file.size / 2048 < 500000 ? "1" : "0";
                if (this.isLt2k === "0") {
                    this.$message({
                        message: "上传文件大小不能超过500M!",
                        type: "error"
                    });
                }
                var res = this.isLt2k === "1";
                if ( res == true ) {
                    this.loading = this.$loading({
                        lock: true,
                        text: '上传中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                }
            }
            // 流程视频上传成功
            ,uploadVideoSuccess(response, file, fileList)
            {
                this.loading.close()
                if (response.code != 200) {
                    return this.$message.error(response.msg);
                } else {
                    this.formData.main_video = response.url
                    return this.$message.success(response.msg);
                }
            }
			,uploadAlbumSuccess(response, file, fileList)
			{
			    if (response.code != 200) {
			        return this.$message.error(response.msg);
			    } else {
			        this.formData.albums.push(response.url)
			        return this.$message.success(response.msg);
			    }
			}
			,deleteAlbumsImage(key) {
				return this.formData.albums.splice(key,1)
			}
			,uploadCoverSuccess(response, file, fileList) {
			    if (response.code != 200) {
			        return this.$message.error(response.msg);
			    } else {
			        this.formData.cover = response.url
			        return this.$message.success(response.msg);
			    }
			}
            ,addSkuPrice()
            {
                this.skus.push({
                    sku_name: "",
                    config: {}
                })
            }
            ,saveSku(key) {
                let _skuInfo = this.skus[key]
                if ( _skuInfo != null ) {
                    let _loading = this.$loading({
                        lock: true,
                        text: '保存中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });

                    _skuInfo.route_id = this.formData.id
                    axios.post(Url({a:'saveSku'}) , _skuInfo).then(res => {
                        if ( res.data.code != 200 ) return this.$message.error(res.data.msg)

                        this.$message.success('操作成功')
                        this.getRoutesSkus()
                        _loading.close()
                    }).catch(_ => {
                        this.$message.error('操作失败')
                    })
                }
            }
            ,delSkuPrice(key) {
                this.skus.splice(key,1)
            }
            ,setSkuPrice(skuId) {
                this.skuPriceCfgFlag = true
                this.activeSkuId = skuId
                axios.get(Url({a:'getSkuPrice' , q:{sku_id:skuId}}))
                .then(res => {
                    this.preSkuconfigDetails = res.data.data
                })
            }
            ,doGenerateSkuDetails()
            {
                this.doGenerateSkuDetailsLoading = true
                this.generateSkuConfig.prices = this.primePriceOptions
                axios.post(Url({a:'generateSkuConfig'}) , this.generateSkuConfig).then(res => {
                    this.doGenerateSkuDetailsLoading = false
                    if ( res.data.code != 200 ) return this.$message.error(res.data.msg)

                    this.preSkuconfigDetails = this.preSkuconfigDetails.concat(res.data.data)

                    this.$message.success('生成成功')
                }).catch(_ => {
                    this.$message.error('操作失败')
                })
            }
            ,saveSkuPrice()
            {
                let _loading = this.$loading({
                    lock: true,
                    text: '保存中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });

                axios.post(Url({a:'saveSkuPrice'}) , {route_id: this.formData.id, sku_id: this.activeSkuId, config: this.preSkuconfigDetails} ).then(res => {
                    _loading.close()
                    if ( res.data.code != 200 ) return this.$message.error(res.data.msg)

                    //this.skuPriceCfgFlag = false
                }).catch(_ => {
                    _loading.close()
                    this.$message.error('操作失败')
                })
            }
            ,getRoutesSkus()
            {
                if ( this.formData.id > 0 ) {
                    axios.get(Url({a:'getSkuList' , q:{route_id:this.formData.id}}))
                    .then(res => {
                        this.skus = res.data.data
                    })
                }
            }
            ,deleteMonth(key) {
                return this.preSkuconfigDetails.splice(key,1)
            }
            ,copyMonth(key) {
                this.copyMonthData.sourceMonth = this.preSkuconfigDetails[key]
                this.showTargetMonths = true
            }
            ,confirmCopyMonth() {
                console.log(this.copyMonthData)
                this.showTargetMonths = false
            }
        },
        mounted() {
            var _this = this
            var albumsSort = document.getElementById('albums-list')

            var sortable = new Sortable(albumsSort, {
                animation: 150,
                ghostClass: 'blue-background-class',
                sort: true,
                onEnd: function (/**Event*/evt) {
                    var itemEl = evt.item;  // dragged HTMLElement
                    evt.to;    // target list
                    evt.from;  // previous list
                    evt.oldIndex;  // element's old index within old parent
                    evt.newIndex;  // element's new index within new parent
                    evt.clone // the clone element
                    evt.pullMode;  // when item is in another sortable: `"clone"` if cloning, `true` if moving
                    console.log(evt)

                    var _new = _this.formData.albums[evt.newIndex]
                    var _old = _this.formData.albums[evt.oldIndex]

                    _this.formData.albums[evt.newIndex] = _old
                    _this.formData.albums[evt.oldIndex] = _new

                    console.log(_this.formData.albums)
                },
            });

            this.doLoadRouteType()
            this.getRoutesSkus()
            this.loadPrimePrice()
        }
    })
</script>
{/block}